<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import {
  EchartsUI,
  type EchartsUIType,
  useEcharts,
} from '@vben/plugins/echarts';

import dayjs from 'dayjs';

import { getOrderTrendFor30Days } from '#/api';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

// 订单数量数组
const orderData = ref<number[]>([]);
// 时间数组
const dateArr = ref<string[]>([]);

// 获取走势图数据
const getTrendsData = async () => {
  try {
    const { data } = await getOrderTrendFor30Days();
    orderData.value =
      data?.map((item: { orderNum: number }) => item.orderNum) || [];
    dateArr.value =
      data?.map((item: { dateTime: string }) =>
        dayjs(item.dateTime).format('MM月DD日'),
      ) || [];
  } catch (error) {
    console.error('获取走势图数据失败：', error);
  }
};

onMounted(async () => {
  await getTrendsData();
  await renderEcharts({
    grid: {
      bottom: 0,
      containLabel: true,
      left: '1%',
      right: '1%',
      top: '2%',
    },
    series: [
      {
        areaStyle: {},
        name: '订单数',
        data: orderData.value,
        itemStyle: {
          color: '#5ab1ef',
        },
        // smooth: true,
        type: 'line',
      },
    ],
    tooltip: {
      axisPointer: {
        lineStyle: {
          color: '#019680',
          width: 1,
        },
      },
      trigger: 'axis',
    },
    xAxis: {
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      data: dateArr.value,
      splitLine: {
        lineStyle: {
          type: 'solid',
          width: 1,
        },
        show: true,
      },
      type: 'category',
    },
    yAxis: [
      {
        axisTick: {
          show: false,
        },
        splitArea: {
          show: true,
        },
        minInterval: 1,
        splitNumber: 4,
        startValue: 0,
        type: 'value',
      },
    ],
  });
});
</script>

<template>
  <EchartsUI ref="chartRef" />
</template>
